<!-- 学社 - 考试 - 考试结果详情 -->
<template>
  <view class="pb-20 containner">
    <z-navbar title="答题详情" :border-bottom="true"></z-navbar>
    <view class="px-4">
      <view class="my-3 flex justify-between">
        <view class="flex-1 c-#666 text-32 text-center text-single"><text class="c-#333 font-bold">分类：</text>{{
          state.detailData?.exam_category }}</view>
        <view class="flex-1 c-#666 text-32 text-center"><text class="c-#333 font-bold">题数：</text>{{
          state.detailData?.questions_number
        }}</view>
        <view class="flex-1 c-#666 text-32 text-center"><text class="c-#333 font-bold">及格分：</text>{{
          state.detailData?.pass_score }}</view>
      </view>
      <!-- 单选题目部分 -->
      <template v-if="state.singleQustionList.length > 0">
        <view class="font-bold c-#333 text-32">一、单选题</view>
        <view v-for="(item, index) in state.singleQustionList" :key="index">
          <!-- 题目 -->
          <view :class="['py-1 px-3', `single${index + 1}`]">{{ `${index + 1}、${item.content}` }}</view>
          <view v-for="(option, optionIndex) in item.options" :key="optionIndex"
            :class="['h-66 my-1 pl-7 flex justify-between items-center', singleAnserStatus(item, option)]">
            <view class="py-1">{{ `${option.sort}、${option.title}` }}</view>
            <!-- 正确图标 -->
            <image v-if="option.is_answer == 1 && item.user_answer == option.sort" class="w-30 h-24 mr-7" src="/package_society/static/images/ic_log_success.png"></image>
            <!-- 错误图标 -->
            <image v-if="option.is_answer == 0 && item.user_answer == option.sort" class="w-24 h-24 mr-7" src="/package_society/static/images/ic_log_error.png"></image>
          </view>
          <u-line color="#eee" margin="32rpx 0 16rpx" :hair-line="false" />
          <!-- 答案区 -->
          <view class="flex items-center px-3 mb-5">
            <view class="flex-1 c-#333 text-26">正确答案：<text class="c-#3FB352">{{ item.answer }}</text></view>
            <view class="flex-1 c-#333 text-26">{{ state.detailData?.is_self ? '你' : 'TA' }}的答案：{{ item.user_answer }}</view>
          </view>
        </view>
      </template>
      <!-- 多选题目部分 -->
      <template v-if="state.multipleQustionList.length > 0">
        <view class="font-bold c-#333 text-32">一、多选题</view>
        <view v-for="(item, index) in state.multipleQustionList" :key="index">
          <!-- 题目 -->
          <view :class="['py-1 px-3', `multiple${index + 1}`]">{{ `${index + 1}、${item.content}` }}</view>
          <view v-for="(option, optionIndex) in item.options" :key="optionIndex"
            :class="['h-66 my-1 px-7 flex justify-between items-center', item.user_answer.split(',').includes(option.sort) ? option.is_answer == 1 ? 'status-success' : 'status-error' : '', option.is_answer == 1 && !item.user_answer.split(',').includes(option.sort) ? 'status-forget' : '']">
            <view class="py-1">{{ `${option.sort}、${option.title}` }}</view>
            <!-- 用户选择中是答案-正确 不是答案-错误 -->
            <image v-if="item.user_answer.split(',').includes(option.sort)"
              :class="[option.is_answer == 1 ? 'w-30 h-24' : 'w-24 h-24']"
              :src="`/package_society/static/images/ic_log_${option.is_answer == 1 ? 'success' : 'error'}.png`">
            </image>
            <!-- 是答案不在用户选择中-漏选 -->
            <view v-if="option.is_answer == 1 && !item.user_answer.split(',').includes(option.sort)"
              class="c-#F4AF22 text-28 font-bold">漏选</view>
          </view>
          <u-line color="#eee" margin="32rpx 0 16rpx" :hair-line="false" />
          <!-- 答案区 -->
          <view class="flex items-center px-3 mb-5">
            <view class="flex-1 c-#333 text-26">正确答案：<text class="c-#3FB352">{{ item.answer.split('、').join('') }}</text>
            </view>
            <view class="flex-1 c-#333 text-26">{{ state.detailData?.is_self ? '你' : 'TA' }}的答案：{{ item.user_answer.split(',').join('') }}</view>
          </view>
        </view>
      </template>
    </view>
    <view class="bg-white bottom-wrap-16">
      <u-line color="#eee" />
      <view class="flex justify-center">
        <view v-if="state.detailData?.is_self" class="btn-add w-330"
          @click="navigate(`/package_society/pages/exam/testing/index?exam_id=${state.detailData?.exam_id}&club_id=${state.club_id}&duration=${state.duration}&exam_log_id=${state.exam_log_id}`)">
          重新考试</view>
        <view class="btn-submit w-330 mr-0" @click="state.showScantronPoup = true">答题板</view>
      </view>
    </view>
    <!-- 成绩卡片 -->
    <view
      class="fixed right-0 bottom-310 card-score w-260 h-110 flex flex-col justify-center items-center rounded-l-full c-white">
      <view class="text-40 font-bold">{{ state.detailData?.score }}</view>
      <view class="text-28">{{ state.detailData?.is_self ? '我' : 'TA' }}的成绩</view>
    </view>
    <!-- 答题板 -->
    <u-popup :modelValue="state.showScantronPoup" :mask-close-able="false" mode="bottom" border-radius="30" height="720"
      closeable close-icon-size="24" @close="state.showScantronPoup = false">
      <view class="relative p-4">
        <view class="flex items-center">
          <view class="mr-2 c-#333 text-32">单选题</view>
          <view class="c-#999 text-24">共{{ state.singleQustionList.length }}题，总分{{ singleTotalScore }}分</view>
        </view>
        <view class="mt-3 mb-4 py-2 px-3 flex items-center bg-Scantron-gray">
          <view class="c-#333 text-28">{{ singileRightNum * state.detailData?.single_choice_point }}分</view>
          <image class="w-32 h-32 ml-6 mr-2" src="/package_society/static/images/ic_record_success.png" />
          <view class="c-#666 text-28">{{ singileRightNum }}题正确</view>
        </view>
        <view class="px-4 flex flex-wrap">
          <view v-for="(item, index) in state.singleQustionList" :key="index"
            :class="['w-68 h-68 flex justify-center items-center mb-4 mr-3 rounded-full', item.answer_status == 0 ? 'scantron-success' : 'scantron-error']"
            @click="questionScroll(`single${index + 1}`)">
            {{ index + 1 }}</view>
        </view>
        <view class="flex items-center">
          <view class="mr-2 c-#333 text-32">多选题</view>
          <view class="c-#999 text-24">共{{ state.multipleQustionList.length }}题，总分{{ multipleTotalScore }}分</view>
        </view>
        <view class="mt-3 mb-4 py-2 px-3 flex items-center bg-Scantron-gray">
          <view class="c-#333 text-28">{{ multipleRightNum * state.detailData?.multiple_choice_point }}分</view>
          <image class="w-32 h-32 ml-6 mr-2" src="/package_society/static/images/ic_record_success.png" />
          <view class="c-#666 text-28">{{ multipleRightNum }}题正确</view>
        </view>
        <view class="px-4 flex flex-wrap">
          <view v-for="(item, index) in state.multipleQustionList" :key="index"
            :class="['w-68 h-68 flex justify-center items-center mb-4 mr-3 rounded-full', item.answer_status == 0 ? 'scantron-success' : 'scantron-error']"
            @click="questionScroll(`multiple${index + 1}`)">
            {{ index + 1 }}</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script setup>
import { navigate } from "@/common/util/uni";
import { getExamViewError } from '@/common/http/module/society.js'

const state = reactive({
  club_id: '', // 学社id
  duration: '', // 考试时长
  exam_log_id: '', // 考试记录id
  detailData: null,
  questionList: [], // 试题数据
  singleQustionList: [], // 单选题
  multipleQustionList: [], // 多选题
  showScantronPoup: false, // 答题板
})

// 单选题总分
const singleTotalScore = computed(() => state.singleQustionList.length * state.detailData?.single_choice_point)
// 多选题总分
const multipleTotalScore = computed(() => state.multipleQustionList.length * state.detailData?.multiple_choice_point)

// 单选题答对题数
const singileRightNum = computed(() => state.singleQustionList.filter(v => v.answer_status == 0).length ?? 0)
// 多选题答对题数
const multipleRightNum = computed(() => state.multipleQustionList.filter(v => v.answer_status == 0).length ?? 0)

// 单选题答题结果背景色
function singleAnserStatus (item, option) {
  let statusBg = ''
  if (option.is_answer == 1 && item.user_answer == option.sort) {
    statusBg = 'status-success'
  }
  if (option.is_answer == 0 && item.user_answer == option.sort) {
    statusBg = 'status-error'
  }
  return statusBg
}

function loadData () {
  getExamViewError(state.exam_log_id).then(res => {
    state.detailData = res.data
    state.questionList = res.data?.question_list
    // 单选
    state.singleQustionList = state.questionList.filter(v => v.type == 0)
    // 多选
    state.multipleQustionList = state.questionList.filter(v => v.type == 1)
  })
}

function questionScroll (className) {
  state.showScantronPoup = false
  uni.createSelectorQuery().select(`.${className}`).boundingClientRect(data => {//目标位置节点 类或者 id 
    uni.createSelectorQuery().select('.containner').boundingClientRect((res) => {//最外层盒子节点类或者 id
      uni.pageScrollTo({
        duration: 0,//过渡时间
        scrollTop: data.top - 80 - res.top,//到达距离顶部的top值
      })
    }).exec()
  }).exec();

}

onLoad(options => {
  state.exam_log_id = options.exam_log_id
  state.club_id = options.club_id
  state.duration = options.duration
  loadData()
})
</script>

<style lang="scss" scoped>
:deep(.u-radio) {
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}

:deep(.u-checkbox) {
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}

.status-success {
  background-color: rgba(63, 179, 82, .1);
  border-radius: 12rpx;
}

.status-error {
  background: rgba(255, 81, 57, .1);
  border-radius: 12rpx;
}

.status-forget {
  background: rgba(244, 175, 34, .1);
  border-radius: 12rpx;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 32rpx;
  background-color: #F6F6F6;
  border-radius: 12rpx;
  color: #F4AF22;
  font-size: 28rpx;
}

.btn-add {
  margin-top: 12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2rpx solid #F4AF22;
  border-radius: 12rpx;
  color: #F4AF22;
  font-size: 28rpx;
}

.card-score {
  background: linear-gradient(42.33deg, rgba(244, 174, 32, 1) 0%, rgba(248, 220, 97, 1) 100%);
  box-shadow: -1.6538240909576416px 5.7675700187683105px 8px 0px rgba(244, 161, 0, 0.18);
}

.bg-Scantron-gray {
  background-color: rgba(196, 196, 196, .1);
}

.scantron-success {
  font-size: 28rpx;
  color: #3FB352;
  background-color: rgba(63, 179, 82, .1);
}

.scantron-error {
  font-size: 28rpx;
  color: #FF5139;
  background-color: rgba(255, 81, 57, .1);
}
</style>

